 /*
 * @description: 选择优惠券
 * @Author: along
 * @Date: 2020-12-01
 * @Last Modified by: along
 * @Last Modified time: 2020-12-02
 */
<template>
    <div
        v-if="dialogVisible"
        class="couponSelect"
    >
        <el-dialog
            title="选择优惠券"
            :visible.sync="dialogVisible"
            width="900px"
            :close-on-click-modal="false"
        >
            <p class="_dese">
                (只展示审核通过的优惠券)
            </p>
            <div v-loading="loading">
                <div class="_nav">
                    <div class="_nav_wrap">
                        <el-button
                            size="small"
                            type="default"
                            :style="{width: '90px'}"
                            @click="goPage('couponList', {})"
                        >
                            优惠券管理
                        </el-button>
                        <el-button
                            type="text"
                            :style="{width: '40px'}"
                            @click="refresh()"
                        >
                            刷新
                        </el-button>
                    </div>
                    <div :style="{display: 'flex', alignItems: 'center'}">
                        <p :style="{margin: '0 5px 0 0px'}">优惠券名称</p>
                        <el-input
                            v-model="keyword"
                            placeholder="请输入优惠券名称"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getList(1)"
                            @keyup.native.enter="getList(1)"
                            :style="{width: '200px'}"
                        />
                        <p :style="{margin: '0 5px 0 10px'}">优惠券编号</p>
                        <el-input
                            v-model="coupon_no"
                            placeholder="请输入优惠券编号"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            @change="getList(1)"
                            @keyup.native.enter="getList(1)"
                            :style="{width: '200px'}"
                        />
                    </div>
                </div>
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        prop="title"
                        label="优惠券名称"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                        :width="140"
                    />
                    <el-table-column
                        prop="coupon_no"
                        label="优惠券编号"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                        :width="140"
                    />
                    <el-table-column
                        prop="use_limit_type"
                        label="适用商品"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                        :width="120"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.use_limit_type === 1">全部商品可用</div>
                            <div v-if="scope.row.use_limit_type === 2">指定商品可用</div>
                            <div v-if="scope.row.use_limit_type === 4">指定商品不可用</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="discount_info"
                        label="优惠内容"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="rest_count"
                        label="剩余数量"
                        show-overflow-tooltip
                        align="left"
                    />
                    <el-table-column
                        prop="use_start_time"
                        label="有效时间"
                        show-overflow-tooltip
                        align="left"
                        :width="180"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.use_time_type === 1">
                                <div>自：{{ scope.row.use_start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}</div>
                                <div>至：{{ scope.row.use_end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}</div>
                            </div>
                            <div v-else>领取后{{ scope.row.use_day_duration }}天内生效</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="small"
                                :type="!scope.row.flag ? 'primary' : 'info'"
                                @click="changeCoupon(scope.row, scope.$index)"
                            >
                                {{ scope.row.flag ? '已选' : '选择' }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-wrapper clearfix">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getList"
                    />
                </div>
                <span
                    slot="footer"
                    :style="{display: 'flex', justifyContent: 'center'}"
                >
                    <el-button
                        size="medium"
                        type="default"
                        :style="{width: '120px', marginRight: '36px'}"
                        @click="dialogVisible = false"
                    >
                        取 消
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        :style="{width: '120px'}"
                        @click="confirm()"
                    >
                        确 定
                    </el-button>
                </span>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'CouponSelect',
    data() {
        return {
            dialogVisible: false,//弹窗开关
            changeData: [],//选择优惠券
            loading: false,//刷新状态
            keyword: '',//优惠券名称
            coupon_no: '',
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            TYPE: '',
            requestUrl: '/student/shop_goods_coupon%5Cget_list_for_select'
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.$set(this.tableData[0], 'flag', false);
                this.changeData = [];
                this.getList(1);
            }
        }
    },
    mounted() {},
    methods: {
        /**
         * @description 打开优惠券弹窗
         * @param   {String}    type    类型区分，一个页面多个不同配置调用
         * @param   {String}    requestUrl    请求地址
         */
        show (type = '', requestUrl = '/student/shop_goods_coupon%5Cget_list_for_select') {
            this.TYPE = type || '';
            this.requestUrl = requestUrl;
            this.getList(1);
            this.dialogVisible = true;
        },

        /**
         * @description 关闭优惠券弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 获取优惠券列表
         */
        getList (page) {
            this.$post(this.requestUrl, {
                page_id: page || this.page.now_page,
                title: this.keyword,
                coupon_no: this.coupon_no
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                    //处理翻页后数据回填,判断优惠券是否在当页
                    if(this.changeData.length) {
                        if(!this.tableData.length) return false;
                        let coupon_no = this.changeData[0]['coupon_no'];
                        let nos = this.tableData.reduce((cur,next) => {
                            cur.push(next.coupon_no);
                            return cur;
                        }, []);

                        if(nos.includes(coupon_no)) {
                            const pageIndex = nos.indexOf(coupon_no);
                            const data = JSON.parse(JSON.stringify(this.tableData[pageIndex]));

                            this.tableData.splice(pageIndex, 1);
                            this.tableData = [data].concat(this.tableData);
                            this.$set(this.tableData[0], 'flag', true);
                        } else {
                            return false;
                        }
                    }
                }
            });
        },

        /**
         * @description 选择优惠券
         */
        changeCoupon (row, index) {
            let data = JSON.parse(JSON.stringify(this.tableData[index]));

            if(row.flag) {
                this.$set(row, 'flag', false);
                this.changeData = [];
            } else {
                if(this.changeData.length) {
                    this.$notify({
                        title: '提示',
                        message: '优惠券最多只可以选择一个',
                        type: 'warning',
                        duration: 2000
                    });
                    return;
                }
                this.tableData.splice(index, 1);
                this.tableData = [data].concat(this.tableData);
                this.$set(this.tableData[0], 'flag', true);
                this.changeData = JSON.parse(JSON.stringify([
                    this.tableData[0]
                ]));
                document.querySelector('.el-table__body-wrapper').scrollTo(0,0);
            }
        },

        /**
         * @description 确定选择优惠券
         */
        confirm () {
            if(!this.changeData.length) {
                this.$notify({
                    title: '提示',
                    message: '请先选择优惠券',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(Number(this.changeData[0]['rest_count']) > 0) {
                this.$emit('emit', {
                    list: this.changeData,
                    type: this.TYPE
                });
            } else {
                this.$notify({
                    title: '提示',
                    message: '优惠券已被领完,请重新选择',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
        },

        /**
         * @description 刷新列表
         */
        refresh () {
            this.loading = true;
            this.changeData = [];
            this.getList();
            setTimeout(() => {
                this.loading = false;
            },300);
        },

        /**
         * @description 页面跳转
         */
        goPage (name, query) {
            const routeData = this.$router.resolve({
                name: name,
                query: {
                    ...query
                }
            });

            window.open(routeData.href, '_blank');
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    },
};
</script>

<style lang="less" scoped>
.couponSelect {
    position: relative;
    ._dese {
        color: #999;
        font-size: 12px;
        position: absolute;
        top: 16px;
        left: 95px;
    }
    ._nav {
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        ._nav_wrap {
            display: flex;
            align-items: center;
        }
    }
    .pagination-wrapper {
        padding-top: 24px;
        padding-bottom: 24px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.couponSelect {
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-table__body-wrapper {
        height: auto !important;
        max-height: 300px;
    }
}
</style>
